{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## htmlの生成"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "%%bash\n",
    "### 必要な設定の読み込み\n",
    "name=jquery_tmp.html\n",
    "\n",
    "### ソースの編集\n",
    "cat <<- 'EOS' > ${name}\n",
    "\n",
    "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n",
    "<html>\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta charset=\"utf-8\">\n",
    "    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\"></script>\n",
    "    <title>Test Page</title>\n",
    "    <style>\n",
    "      #section-1 {\n",
    "        background-color: #C8E6C9;\n",
    "      }\n",
    "      #section-2 {\n",
    "        background-color: #FFF9C4;\n",
    "      }\n",
    "      .child1 {\n",
    "        text-decoration: underline;\n",
    "      }\n",
    "      .child2 {\n",
    "        font-size: 24px;\n",
    "      }\n",
    "      .child3 {\n",
    "        color: red;\n",
    "      }\n",
    "    </style>\n",
    "  </head>\n",
    "\n",
    "  <body>\n",
    "    <section id=\"section-1\">\n",
    "      <h2>Section1</h2>\n",
    "      <p class=\"child1\">Child node1</p>\n",
    "      <p class=\"child2\">Child node2</p>\n",
    "      <p class=\"child3\">Child node3</p>\n",
    "    </section>\n",
    "    <section id=\"section-2\">\n",
    "      <h2>Section2</h2>\n",
    "      <p class=\"child1\">Child node1</p>\n",
    "      <p class=\"child2\">Child node2</p>\n",
    "      <p class=\"child3\">Child node3</p>\n",
    "    </section>\n",
    "  </body>\n",
    "</html>\n",
    "\n",
    "EOS"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## data.toString()の概要"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 132,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "jQuery {\n",
      "  '0': Text {},\n",
      "  '1': HTMLMetaElement {},\n",
      "  '2': Text {},\n",
      "  '3': HTMLMetaElement {},\n",
      "  '4': Text {},\n",
      "  '5': HTMLScriptElement {},\n",
      "  '6': Text {},\n",
      "  '7': HTMLTitleElement {},\n",
      "  '8': Text {},\n",
      "  '9': HTMLStyleElement {},\n",
      "  '10': Text {},\n",
      "  '11': HTMLElement {},\n",
      "  '12': Text {},\n",
      "  '13': HTMLElement {},\n",
      "  '14': Text {},\n",
      "  length: 15 }\n",
      "================================================\n",
      "\n",
      "\n",
      "  \n",
      "    \n",
      "    \n",
      "    \n",
      "    Test Page\n",
      "    \n",
      "      #section-1 {\n",
      "        background-color: #C8E6C9;\n",
      "      }\n",
      "      #section-2 {\n",
      "        background-color: #FFF9C4;\n",
      "      }\n",
      "      .child1 {\n",
      "        text-decoration: underline;\n",
      "      }\n",
      "      .child2 {\n",
      "        font-size: 24px;\n",
      "      }\n",
      "      .child3 {\n",
      "        color: red;\n",
      "      }\n",
      "    \n",
      "  \n",
      "\n",
      "  \n",
      "    \n",
      "      Section1\n",
      "      Child node1\n",
      "      Child node2\n",
      "      Child node3\n",
      "    \n",
      "    \n",
      "      Section2\n",
      "      Child node1\n",
      "      Child node2\n",
      "      Child node3\n",
      "    \n",
      "  \n",
      "\n",
      "================================================\n",
      "Text {}\n",
      "HTMLMetaElement {}\n",
      "Text {}\n",
      "HTMLMetaElement {}\n",
      "Text {}\n",
      "HTMLScriptElement {}\n",
      "Text {}\n",
      "Test Page\n",
      "Text {}\n",
      "HTMLStyleElement {}\n",
      "Text {}\n",
      "HTMLElement {}\n",
      "Text {}\n",
      "HTMLElement {}\n",
      "Text {}\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "html=jquery_tmp.html\n",
    "js=tmp.js\n",
    "\n",
    "### jsファイルの作成\n",
    "### ヘッダ部分\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "EOS\n",
    "\n",
    "### htmlファイル指定部分\n",
    "cat <<- EOS >> ${js}\n",
    "fs.readFile(__dirname + \"/${html}\", function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "EOS\n",
    "\n",
    "### スクリプト部分\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "  $(function() {\n",
    "    var body = data.toString();\n",
    "    //console.log(body);\n",
    "    //console.log(\"================================================\");\n",
    "    console.log($(body));\n",
    "    console.log(\"================================================\");\n",
    "    console.log($(body).text());\n",
    "    console.log(\"================================================\");\n",
    "    console.log($(body)[0]);\n",
    "    console.log($(body)[1]);\n",
    "    console.log($(body)[2]);\n",
    "    console.log($(body)[3]);\n",
    "    console.log($(body)[4]);\n",
    "    console.log($(body)[5]);\n",
    "    console.log($(body)[6]);\n",
    "    console.log($($(body)[7]).text());\n",
    "    console.log($(body)[8]);\n",
    "    console.log($(body)[9]);\n",
    "    console.log($(body)[10]);\n",
    "    console.log($(body)[11]);\n",
    "    console.log($(body)[12]);\n",
    "    console.log($(body)[13]);\n",
    "    console.log($(body)[14]);\n",
    "});\n",
    "EOS\n",
    "\n",
    "### fs.readFile閉じ\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "jQuery {\n",
      "  '0': Text {},\n",
      "  '1': HTMLMetaElement {},\n",
      "  '2': Text {},\n",
      "  '3': HTMLMetaElement {},\n",
      "  '4': Text {},\n",
      "  '5': HTMLScriptElement {},\n",
      "  '6': Text {},\n",
      "  '7': HTMLTitleElement {},\n",
      "  '8': Text {},\n",
      "  '9': HTMLStyleElement {},\n",
      "  '10': Text {},\n",
      "  '11': HTMLElement {},\n",
      "  '12': Text {},\n",
      "  '13': HTMLElement {},\n",
      "  '14': Text {},\n",
      "  length: 15 }\n",
      "================================================\n",
      "HTMLTitleElement {}\n",
      "jQuery { '0': HTMLTitleElement {}, length: 1 }\n",
      "HTMLTitleElement {}\n",
      "Test Page\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "html=jquery_tmp.html\n",
    "js=tmp.js\n",
    "\n",
    "### jsファイルの作成\n",
    "### ヘッダ部分\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "EOS\n",
    "\n",
    "### htmlファイル指定部分\n",
    "cat <<- EOS >> ${js}\n",
    "fs.readFile(__dirname + \"/${html}\", function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "EOS\n",
    "\n",
    "### スクリプト部分\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "  $(function() {\n",
    "    var body = data.toString();\n",
    "    //console.log(body);\n",
    "    //console.log(\"================================================\");\n",
    "    console.log($(body));\n",
    "    console.log(\"================================================\");\n",
    "    console.log($(body)[7]);\n",
    "    console.log($($(body)[7]));\n",
    "    console.log($($(body)[7])[0]);\n",
    "    console.log($($(body)[7]).text());\n",
    "});\n",
    "EOS\n",
    "\n",
    "### fs.readFile閉じ\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "## それぞれの要素の取得"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 75,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "jQuery {\n",
      "  '0': HTMLHeadingElement {},\n",
      "  '1': HTMLHeadingElement {},\n",
      "  length: 2,\n",
      "  prevObject: \n",
      "   jQuery {\n",
      "     '0': Text {},\n",
      "     '1': HTMLMetaElement {},\n",
      "     '2': Text {},\n",
      "     '3': HTMLMetaElement {},\n",
      "     '4': Text {},\n",
      "     '5': HTMLScriptElement {},\n",
      "     '6': Text {},\n",
      "     '7': HTMLTitleElement {},\n",
      "     '8': Text {},\n",
      "     '9': HTMLStyleElement {},\n",
      "     '10': Text {},\n",
      "     '11': HTMLElement {},\n",
      "     '12': Text {},\n",
      "     '13': HTMLElement {},\n",
      "     '14': Text {},\n",
      "     length: 15 } }\n",
      "================================================\n",
      "Section1Section2\n",
      "================================================\n",
      "2\n",
      "================================================\n",
      "\n",
      "\n",
      "  \n",
      "    \n",
      "    \n",
      "    \n",
      "    Test Page\n",
      "    \n",
      "      #section-1 {\n",
      "        background-color: #C8E6C9;\n",
      "      }\n",
      "      #section-2 {\n",
      "        background-color: #FFF9C4;\n",
      "      }\n",
      "      .child1 {\n",
      "        text-decoration: underline;\n",
      "      }\n",
      "      .child2 {\n",
      "        font-size: 24px;\n",
      "      }\n",
      "      .child3 {\n",
      "        color: red;\n",
      "      }\n",
      "    \n",
      "  \n",
      "\n",
      "  \n",
      "    \n",
      "      Section1\n",
      "      Child node1\n",
      "      Child node2\n",
      "      Child node3\n",
      "    \n",
      "    \n",
      "      Section2\n",
      "      Child node1\n",
      "      Child node2\n",
      "      Child node3\n",
      "    \n",
      "  \n",
      "\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "html=jquery_tmp.html\n",
    "js=tmp.js\n",
    "\n",
    "### jsファイルの作成\n",
    "### ヘッダ部分\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "EOS\n",
    "\n",
    "### htmlファイル指定部分\n",
    "cat <<- EOS >> ${js}\n",
    "fs.readFile(__dirname + \"/${html}\", function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "EOS\n",
    "\n",
    "### スクリプト部分\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "  $(function() {\n",
    "    var body = data.toString();\n",
    "    \n",
    "    var result_h2 = $(body).find('h2')\n",
    "    var result_h2_text = $(body).find('h2').text()\n",
    "    var result1 = $(body).find('h2')['length']\n",
    "    var result2 = $(body).find('h2')['prevObject'].text()\n",
    "    \n",
    "    console.log(result_h2);\n",
    "    console.log(\"================================================\");\n",
    "    console.log(result_h2_text);\n",
    "    console.log(\"================================================\");\n",
    "    console.log(result1);\n",
    "    console.log(\"================================================\");\n",
    "    console.log(result2);\n",
    "  });\n",
    "EOS\n",
    "\n",
    "### fs.readFile閉じ\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 76,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "jQuery {\n",
      "  '0': HTMLHeadingElement {},\n",
      "  '1': HTMLHeadingElement {},\n",
      "  length: 2,\n",
      "  prevObject: \n",
      "   jQuery {\n",
      "     '0': Text {},\n",
      "     '1': HTMLMetaElement {},\n",
      "     '2': Text {},\n",
      "     '3': HTMLMetaElement {},\n",
      "     '4': Text {},\n",
      "     '5': HTMLScriptElement {},\n",
      "     '6': Text {},\n",
      "     '7': HTMLTitleElement {},\n",
      "     '8': Text {},\n",
      "     '9': HTMLStyleElement {},\n",
      "     '10': Text {},\n",
      "     '11': HTMLElement {},\n",
      "     '12': Text {},\n",
      "     '13': HTMLElement {},\n",
      "     '14': Text {},\n",
      "     length: 15 } }\n",
      "================================================\n",
      "Section1Section2\n",
      "================================================\n",
      "2\n",
      "================================================\n",
      "\n",
      "\n",
      "  \n",
      "    \n",
      "    \n",
      "    \n",
      "    Test Page\n",
      "    \n",
      "      #section-1 {\n",
      "        background-color: #C8E6C9;\n",
      "      }\n",
      "      #section-2 {\n",
      "        background-color: #FFF9C4;\n",
      "      }\n",
      "      .child1 {\n",
      "        text-decoration: underline;\n",
      "      }\n",
      "      .child2 {\n",
      "        font-size: 24px;\n",
      "      }\n",
      "      .child3 {\n",
      "        color: red;\n",
      "      }\n",
      "    \n",
      "  \n",
      "\n",
      "  \n",
      "    \n",
      "      Section1\n",
      "      Child node1\n",
      "      Child node2\n",
      "      Child node3\n",
      "    \n",
      "    \n",
      "      Section2\n",
      "      Child node1\n",
      "      Child node2\n",
      "      Child node3\n",
      "    \n",
      "  \n",
      "\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "html=jquery_tmp.html\n",
    "js=tmp.js\n",
    "\n",
    "### jsファイルの作成\n",
    "### ヘッダ部分\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "EOS\n",
    "\n",
    "### htmlファイル指定部分\n",
    "cat <<- EOS >> ${js}\n",
    "fs.readFile(__dirname + \"/${html}\", function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "EOS\n",
    "\n",
    "### スクリプト部分\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "  $(function() {\n",
    "    var body = data.toString();\n",
    "    \n",
    "    var result_h2 = $(body).find('h2')\n",
    "    var result_h2_text = $(body).find('h2').text()\n",
    "    var result1 = $(body).find('h2')['length']\n",
    "    var result2 = $(body).find('h2')['prevObject'].text()\n",
    "    \n",
    "    console.log(result_h2);\n",
    "    console.log(\"================================================\");\n",
    "    console.log(result_h2_text);\n",
    "    console.log(\"================================================\");\n",
    "    console.log(result1);\n",
    "    console.log(\"================================================\");\n",
    "    console.log(result2);\n",
    "  });\n",
    "EOS\n",
    "\n",
    "### fs.readFile閉じ\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 81,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Section1Section2\n",
      "================================================\n",
      "Section1Section2\n",
      "================================================\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "html=jquery_tmp.html\n",
    "js=tmp.js\n",
    "\n",
    "### jsファイルの作成\n",
    "### ヘッダ部分\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "const fs = require('fs');\n",
    "\n",
    "EOS\n",
    "\n",
    "### htmlファイル指定部分\n",
    "cat <<- EOS >> ${js}\n",
    "fs.readFile(__dirname + \"/${html}\", function (err, data) {\n",
    "  if (err) throw err;\n",
    "\n",
    "EOS\n",
    "\n",
    "### スクリプト部分\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "  $(function() {\n",
    "    var body = data.toString();\n",
    "    \n",
    "    var result_h2_text = $(body).find('h2').text()\n",
    "    console.log(result_h2_text);\n",
    "    console.log(\"================================================\");\n",
    "\n",
    "    $(body).find('h2').text(\"hoge\");\n",
    "    \n",
    "    var result_h2_text_edit = $(body).find('h2').text()\n",
    "    \n",
    "    console.log(result_h2_text_edit);\n",
    "    console.log(\"================================================\");\n",
    "    \n",
    "    \n",
    "    $(\"p\").text(\"<b>Some</b> new text.\");\n",
    "$(\"input\").val($(\"p\").html());\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### fs.readFile閉じ\n",
    "cat <<- 'EOS' >> ${js}\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 82,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0:apple\n",
      "1:orange\n",
      "2:grape\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "js=sample.js\n",
    "\n",
    "### サンプルファイルの作成\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "\n",
    "$(function() {\n",
    "\n",
    "    var arr = [ \"apple\", \"orange\", \"grape\" ];\n",
    "    $.each(arr, function(i, val) {\n",
    "        console.log(i+':'+val);\n",
    "    });\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "123\n",
      "jQuery { '0': 456, length: 1 }\n",
      "456\n",
      "1\n"
     ]
    }
   ],
   "source": [
    "%%bash\n",
    "source ~/.nvm/nvm.sh\n",
    "js=sample.js\n",
    "\n",
    "### サンプルファイルの作成\n",
    "cat <<- 'EOS' > ${js}\n",
    "const jsdom = require(\"jsdom\");\n",
    "const { JSDOM } = jsdom;\n",
    "const { window } = new JSDOM(`<!DOCTYPE html>`);\n",
    "const $ = require('jquery')(window);\n",
    "\n",
    "$(function() {\n",
    "\n",
    "  var x = 123;\n",
    "  console.log(x);\n",
    "\n",
    "  var y = $(456);\n",
    "  console.log(y);\n",
    "  console.log(y[0]);\n",
    "  console.log(y['length']);\n",
    "\n",
    "});\n",
    "EOS\n",
    "\n",
    "### 実行\n",
    "node ${js}"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
